<template>
  <div>
    <div style="position: absolute; top: 10px; left: 260px; z-index: 9999; background: rgba(135, 206, 250, 0.7); padding: 5px 10px; border-radius: 5px; font-family: 'Microsoft YaHei', sans-serif;">
      <label for="mapStyle">地图风格:</label>
      <select id="mapStyle" v-model="selectedMapStyle" @change="changeMapStyle" style="margin-left: 5px;">
        <option value="normal">普通</option>
        <option value="satellite">卫星</option>
        <option value="mixed">混合</option>
      </select>
    </div>

    <div id="map" style="height: 100vh; width: 100vw;"></div>

    <div v-if="coordinates" style="position: absolute; top: 10px; left: 10px; background: rgba(135, 206, 250, 0.7); padding: 5px; border-radius: 5px;">
      <strong>经度:</strong> {{ coordinates.lng.toFixed(5) }} <strong>纬度:</strong> {{ coordinates.lat.toFixed(5) }}
    </div>

    <div v-if="alertMessage" style="position: absolute; top: 60px; left: 10px; background: rgba(135, 206, 250, 0.7); padding: 10px; border-radius: 5px; font-size: 20px; font-family: 'Microsoft YaHei', sans-serif;">
      <span v-html="alertMessage"></span>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'; // 导入 xlsx 库

export default {
  name: 'MapComponent',
  data() {
    return {
      map: '',
      mapZoom: 17, // 默认情况下的地图缩放级别
      coordinates: null, // 当前经纬度
      shipMarkers: [],
      shipsData: [], // 初始化为空数组
      alertMessage: null, // 用于存储提示信息
      selectedMapStyle: 'satellite' // 默认地图风格
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap(); // 初始化地图
      this.loadData(); // 加载数据
    });
  },
  methods: {
    initMap() {
      this.map = new BMap.Map('map'); // 创建新的地图实例
      this.map.centerAndZoom(new BMap.Point(108.912255, 22.796715), this.mapZoom); // 在指定坐标中心化地图
      this.map.setCurrentCity('西江'); // 设置当前城市
      this.map.enableScrollWheelZoom(true); // 启用滚轮缩放
      this.map.enableContinuousZoom(true); // 启用连续缩放
      this.changeMapStyle(); // 设置初始地图风格

      // 添加鼠标移动事件来实时显示经纬度
      this.map.addEventListener('mousemove', (e) => {
        this.coordinates = {
          lng: e.point.lng, // 更新经度
          lat: e.point.lat  // 更新纬度
        };
      });
    },
    changeMapStyle() {
      switch (this.selectedMapStyle) {
        case 'normal':
          this.map.setMapType(BMAP_NORMAL_MAP); // 普通地图
          break;
        case 'satellite':
          this.map.setMapType(BMAP_SATELLITE_MAP); // 卫星图
          break;
        case 'mixed':
          this.map.setMapType(BMAP_HYBRID_MAP); // 混合图
          break;
        default:
          this.map.setMapType(BMAP_SATELLITE_MAP); // 默认设置为卫星地图
      }
      // 在切换地图风格后重新添加船舶标记
      this.addShipMarkers();
    },
    addShipMarkers() {
      // 清除旧的标记
      this.shipMarkers.forEach(marker => {
        this.map.removeOverlay(marker);
      });
      this.shipMarkers = []; // 清空标记数组
      // 按照时间排序船舶数据
      this.shipsData.sort((a, b) => new Date(a.GPS_TIME) - new Date(b.GPS_TIME));

      const points = []; // 存储经纬度点
      const normalShipIcon = new BMap.Icon("/files/dic1.png", new BMap.Size(32, 32)); // 普通地图图标
      const shipIcons = [
        new BMap.Icon("/files/sships/icon1.png", new BMap.Size(32, 32)),
        new BMap.Icon("/files/sships/icon2.png", new BMap.Size(32, 32)),
        new BMap.Icon("/files/sships/icon3.png", new BMap.Size(32, 32)),
        new BMap.Icon("/files/sships/icon4.png", new BMap.Size(32, 32)),
        new BMap.Icon("/files/sships/icon5.png", new BMap.Size(32, 32))
      ]; // 卫星图和混合图的图标数组

      this.shipsData.forEach(ship => {
        const point = new BMap.Point(ship.FIX_X, ship.FIX_Y); // FIX_X 为经度，FIX_Y 为纬度
        points.push(point); // 将点添加到数组中

        let shipMarkerIcon;
        // 根据地图风格选择图标
        if (this.selectedMapStyle === 'normal') {
          shipMarkerIcon = normalShipIcon; // 普通地图使用默认图标
        } else {
          // 卫星图和混合图随机选择一个图标
          const randomIndex = Math.floor(Math.random() * shipIcons.length);
          shipMarkerIcon = shipIcons[randomIndex];
        }

        const shipMarker = new BMap.Marker(point, { icon: shipMarkerIcon }); // 为船舶创建带有自定义图标的标记
        this.map.addOverlay(shipMarker); // 将标记添加到地图上
        this.shipMarkers.push(shipMarker); // 将标记存储到 shipMarkers 数组中

        // 为标记添加点击事件
        shipMarker.addEventListener('click', () => {
          this.showAlert(`经度: ${ship.FIX_X}<br>纬度: ${ship.FIX_Y}<br>时间: ${ship.GPS_TIME}`); // 弹出提示框显示经纬度和时间信息
        });
      });
    },
    loadData() {
      const filePath = '/files/北斗定位数据for桂林理工.xlsx'; // 相对路径
      fetch(filePath)
        .then(response => {
          if (!response.ok) {
            throw new Error('网络响应不正常');
          }
          return response.arrayBuffer();
        })
        .then(data => {
          try {
            const workbook = XLSX.read(data, { type: 'array' }); // 读取 Excel 数据
            const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个工作表

            if (!worksheet) {
              throw new Error('未找到工作表');
            }

            const jsonData = XLSX.utils.sheet_to_json(worksheet); // 将工作表转换为 JSON 数据

            console.log('加载的数据:', jsonData); // 添加调试信息

            // 清空当前的船舶数据
            this.shipsData = [];

            // 遍历 JSON 数据并添加到 shipsData
            jsonData.forEach(item => {
              this.shipsData.push({
                FIX_X: item['FIX_X'], // 根据标签名取出经度
                FIX_Y: item['FIX_Y'], // 根据标签名取出纬度
                GPS_TIME: this.formatExcelDate(item['GPS_TIME']) // 转换时间格式
              });
            });

            // 添加船舶标记到地图
            this.addShipMarkers();
          } catch (error) {
            console.error('解析 Excel 文件时出错:', error);
          }
        })
        .catch(error => console.error('加载文件时出错:', error));
    },
    formatExcelDate(excelDate) {
      // 将 Excel 日期格式转换为可读的日期字符串
      const date = new Date((excelDate - 25569) * 86400 * 1000); // Excel 日期转换为 JavaScript 日期
      return date.toLocaleString(); // 返回本地化的日期字符串
    },
    showAlert(message) {
      this.alertMessage = message; // 设置提示信息
    }
  }
};
</script>

<style>
.anchorBL {
  display: none; /* 隐藏锚点 */
}

#map {
  position: relative; /* 设置地图的相对定位 */
  height: 100vh; /* 设置高度为视口高度 */
  width: 100vw; /* 设置宽度为视口宽度 */
}
</style>
